<template>
  <el-table :data="notifications" style="width: 100%">
    <el-table-column prop="id" label="ID" width="50" />
    <el-table-column prop="recipient" label="收件人" />
    <el-table-column prop="channel" label="通知类型" />
    <el-table-column prop="content" label="通知内容" />
    <el-table-column prop="time" label="通知时间" />
    <el-table-column prop="urgency" label="紧急等级" />
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button type="text" @click="handleDelete(row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from "vue";
import { ElTable, ElTableColumn, ElButton } from "element-plus";

const notifications = ref([
  {
    id: 1,
    recipient: "张工",
    channel: "APP/邮件",
    content: "设备报警消息推送",
    time: "2024-01-01 11:12:13",
    urgency: "中等"
  },
  {
    id: 2,
    recipient: "财务",
    channel: "邮件/短信",
    content: "设备维修配件补单",
    time: "2024-01-02 12:22:13",
    urgency: "紧急"
  },
  {
    id: 3,
    recipient: "陈工",
    channel: "APP",
    content: "监控例行维修检修",
    time: "2024-01-02 15:12:33",
    urgency: "一般"
  }
]);

function handleDelete(id) {
  const index = notifications.value.findIndex(item => item.id === id);
  if (index !== -1) {
    notifications.value.splice(index, 1);
  }
}
</script>

<style scoped>
/* 你可以在这里添加一些自定义样式 */
</style>
